/*
 * @Author: 肖思汗 
 * @Date: 2025-06-06 14:11:11 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-08-05 17:11:41
 */


import '@nutui/nutui-react-taro/dist/style.css';
import { Image, View } from "@tarojs/components";
import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import styles from "./designerBtns.module.less";

import designerStore from "../Designer/designerStore";
import amplifyIcon from './img/amplify.png';
import clearIcon from './img/clear.png';
import layerIcon from './img/layer.png';
import redoIcon from './img/redo.png';
import reduceIcon from './img/reduce.png';
import undoIcon from './img/undo.png';
import selectAllSVG from "./img/selectAll.svg";
import designerRender from '../Designer/designerRender';
import designerHistory from '../Designer/designerHistory';
import clsx from 'clsx';
import changeLayerStore from '../ChangeLayer/changeLayerStore';
import Taro, { useDidHide } from '@tarojs/taro';
import utilsStore from 'src/utils/utilsStore';
import utils from 'src/utils/utils';
import { observer } from "mobx-react-lite";
import textureManager from '../textureManager';

// !designerStore.activeObjectId ||

interface Iprops {
    children?: ReactNode
}

// 设计器的按钮
const DesignerBtns = observer((props: Iprops) => {

    const [amplify, setAmplify] = useState(designerStore.amplify);
    const [goodsBaseData, setGoodsBaseData] = useState(designerStore.goodsBaseData);

    const [changeLayerShow, setChangeLayerShow] = useState(changeLayerStore.show);

    const [selectAll, setSelectAll] = useState(false);

    useEffect(() => autorun(() => {
        setAmplify(designerStore.amplify);
        setGoodsBaseData(toJS(designerStore.goodsBaseData));
        setChangeLayerShow(changeLayerStore.show);
        if (designerStore.activeObjectId) {
            const activeObject = designerRender.getActiveObject();
            if (activeObject.type === 'activeselection') {
                setSelectAll(true);
            } else {
                setSelectAll(false);
            }
        } else {
            setSelectAll(false);
        }

    }, { delay: 30 }), []);

    useDidHide(() => {
        console.log("DesignerBtns", "hide");
        designerStore.setAmplify(false);
    });

    return (
        <>
            <View
                className={styles.designerBtns}
                style={{
                    bottom: utilsStore.safeAreaBottom > 0 ? (utilsStore.safeAreaBottom + utils.rpx2px(120 + 20)) : utils.rpx2px(120 + 20 + 20 + 20)
                }}
            >

                {/* 左侧按钮组 - 撤销和重做 */}
                <View className={styles.leftBtns}>
                    <View
                        className={clsx(styles.btn, !designerHistory.hasUndo && styles.disabled)}
                        onClick={() => designerRender.undo()}
                    >
                        <Image className={styles.btnIcon} src={undoIcon} />
                    </View>
                    <View
                        className={clsx(styles.btn, !designerHistory.hasRedo && styles.disabled)}
                        onClick={() => designerRender.redo()}>
                        <Image className={styles.btnIcon} src={redoIcon} />
                    </View>
                </View>

                {/* 右侧按钮组 - 放大、缩小、图层和清除 */}
                <View className={styles.rightBtns}>
                    <View
                        className={clsx(styles.btn, !selectAll && styles.disabled)}
                        onClick={() => {
                            if (selectAll) {
                                designerRender.discardActiveObject();
                                designerRender.requestRenderAll();
                            } else {
                                // 全选
                                designerRender.selectAll();
                            }
                        }}
                    >
                        <Image
                            src={selectAllSVG}
                            className={styles.btnIcon}
                            style={{
                                width: "40rpx",
                                height: "40rpx"
                            }}
                        />
                    </View>

                    <View
                        className={styles.btn}
                        onClick={() => {
                            Taro.showActionSheet({
                                itemList: ["清空当前", "清空全部"],
                                success: (res) => {
                                    const { designData, activeComponent } = designerStore;
                                    for (let key in designData.designData) {
                                        if (activeComponent === key) {
                                            // 清空当前设计,保留背景
                                            designerRender.clear(designerRender.background);
                                            designerRender.recordHistory();
                                        } else if (res.tapIndex === 1) {
                                            designData.designData[key]["objects"] = [];
                                            textureManager.updata(key, designData.designData[key]);
                                        }
                                    }
                                }
                            });

                        }}
                    >
                        <Image className={styles.btnIcon} src={clearIcon} />
                    </View>

                    {
                        ["直喷", "烫画"].includes(goodsBaseData.secondaryCraftName) &&
                        <View
                            className={styles.btn}
                            onClick={() => {
                                designerStore.setAmplify(!designerStore.amplify);
                            }}
                        >
                            <Image
                                src={designerStore.amplify ? reduceIcon : amplifyIcon}
                                className={styles.btnIcon}
                            />
                        </View>
                    }

                    <View
                        className={
                            clsx(styles.btn,
                                (designerStore.activeObjectType === "activeselection" || !Boolean(designerStore.activeObjectId)) &&
                                styles.disabled
                            )
                        }
                        onClick={() => {
                            if (!(designerStore.activeObjectType === "activeselection" || !Boolean(designerStore.activeObjectId))) {
                                changeLayerStore.setShow(true);
                            }
                            //  layerListStore.setShow(true);
                        }}
                    >
                        <Image className={styles.btnIcon} src={layerIcon} />
                    </View>

                </View>

            </View>
        </>
    );
});

export default DesignerBtns;